<template>
  <div class="geo-location">
    <input type="search" name="" id="" v-model="city" placeholder="请输入城市名称" @change="getData()">
  </div>
</template>

<script>
import axios from 'axios'
import { KEY, API_GEO } from '@/common/constants'
// import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      city: ''
    }
  },
  methods: {
    // ...mapMutations({
    //   "updateLocationMutation"
    // }),
    // 注意：mapMutations和mapActions一般情况下只会出现一个
    ...mapActions([
      "updateLocationAction"
    ]),
    getData() {
      axios.get(API_GEO, {
        params: {
          key: KEY,
          location: this.city
        }
      }).then(res => {
        console.log(res.data);
        //state通过dispatch方法分发action
        // this.$store.dispatch('updateLocationAction', res.data.location[0]);

        //使用mapActions函数，可以将 `this.increment()` 映射为 `this.$store.commit('increment')`
        this.updateLocationAction(res.data.location[0])

        //此方法是越过了action直接从vue component组件commit提交mutation
        // this.$store.commit("updateLocationMutation", res.data.location[0])

        //使用mapMutations函数，可以将 `this.increment()` 映射为 `this.$store.commit('increment')`
        // this.updateLocationMutation(res.data.location[0])

        console.log(this.$store.state.location);
      })
    }
  },
  // mounted(){
  //   this.getData();
  // }
}
</script>

<style scoped></style>
